<template>
    <div class="item">
        <img :src="item.pic" alt="">
        <h3 v-html="item.name"></h3>
        <p>{{item.characteristic}}</p>
        <span>{{item.minPrice}}</span>
    </div>
</template>

<script>
export default {
  name: 'recCard',
  props: {
    item: Object
  }
}
</script>

<style scoped lang="scss">
.item {
    flex-basis: 49%;
    img {
        width: 100%;
        height: 476px;
    }
    h3 {
        font-size: 30px;
        max-width: 350px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    p {
        font-size: 24px;
        color: #888;
        margin: 20px 0;
        max-width: 350px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    span {
        display: block;
        font-size: 24px;
        color: #d00000;
    }
}
</style>